<template>
  <div class="container">
    <div class="content">
      <div class="content-in">
        <div class="time-display">
          <!-- <div>{{ lunarTime }}</div> -->
          <div>{{ yinliMonthDay }}</div>
          <div>{{ shengxiaoYear }}</div>
          <div>{{ solarTime.toLocaleString() }}</div>
          
        </div>
        <div class="gong">
          <div
            class="gong-item"
            v-for="(item, index) in gongArr"
            :key="index"
            :class="{ active: activeIndex === realIndex(index) }"
          >
            <div class="gong-item-title">{{ item.name }}</div>
          </div>
        </div>
        <div class="btn-content">
          <div
            class="modern-btn"
            :class="disable ? 'disabled-area' : ''"
            @click="!disable ? go() : ''"
          >
            起卦
          </div>
        </div>
        <!--        <div class="quick-look">-->
        <!--          <div class="quick-look-item" v-for="(item, index) in gongArr" :key="index">-->
        <!--            {{ gongArr[realIndex(index)].name + '->' + gongArr[realIndex(index)].luck }}-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="assertion">
          <div v-if="viewIndex !== -1">
            卦辞：{{
              gongArr[orderMap[viewIndex]].desc + '，' + gongArr[orderMap[viewIndex]].details
            }}
          </div>
        </div>
        <div class="general">
          <div v-if="viewIndex !== -1">通解：{{ gongArr[orderMap[viewIndex]].general }}</div>
        </div>
      </div>
    </div>
    <div class="bottom">仅供娱乐，学习国学，如有雷同纯属巧合</div>
  </div>
</template>

<style lang="scss">
.active {
  background: #495057;
  color: white;
}
.container {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}
.content {
  width: 375px;
  //max-width: 375px;
  //min-height: 667px;
  height: 100%;
  margin: 0 auto;
  font-family: pixFont;
  font-size: 18px;
  background: white;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #444 0%, #fff 50%, #444 100%);
  .content-in {
    width: 327px;
    margin: 0 auto;
    height: 518px;
    //position: relative;
    .gong {
      display: flex;
      width: 327px;
      justify-content: space-between;
      flex-wrap: wrap;
      .gong-item {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 1px solid #000;
        margin-top: 9px;
      }
    }
    .btn-content {
      margin-top: 10px;
    }
    .assertion {
      margin-top: 30px;
      height: 60px;
    }
    .general {
      margin-top: 40px;
      height: 25px;
    }
  }
}
.bottom {
  font-family: pixFont;
  color: #898b8c;
  position: absolute;
  bottom: 2px;
  font-size: 12px;
  text-align: center;
  width: 100%;
}
</style>
<style lang="scss">
//按钮样式
.modern-btn {
  /* 基础样式 */
  width: 100px;
  margin: 0 auto;
  text-align: center;
  padding: 5px;
  background: #f8f9fa;
  border: 1px solid #bfc1c5;
  //border-radius: 8px;
  color: #495057;
  //font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

  /* 简约细节 */
  outline: none;
  transform: scale(1);
  position: relative;
  overflow: hidden;
}

/* 悬停效果 */
.modern-btn:hover {
  background: #f1f3f5;
  border-color: #dee2e6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* 点击效果 */
.modern-btn:active {
  background: #e9ecef;
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 加载状态指示器（可选） */
.modern-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(73, 80, 87, 0.2);
  border-top-color: rgba(73, 80, 87, 0.8);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.disabled-area {
  background-color: #f5f5f5 !important;
  color: #a8a8a8 !important;
  user-select: none;
}
</style>
<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { Lunar } from 'lunar-javascript'
import dayjs from 'dayjs'
import { shichen2num, xiaoLiuRenAccurate, xiaoLiuRenAccurateAll } from '@/utils/xiao6ren.js'
import gongArr from '@/database/xiao6ren.json'
const time = Lunar.fromDate(new Date())
// 映射到循环顺序 [大安, 留连, 速喜, 赤口, 小吉, 空亡]
const orderMap = [3, 0, 1, 2, 5, 4]
// 计算实际索引
const realIndex = (index) => orderMap.indexOf(index)
const activeIndex = ref() // 当前算出的卦数
const viewIndex = ref(-1) // 显示的卦数
const solarTime = ref(new Date()) // 阳历时间
const lunarTime = ref(Lunar.fromDate(solarTime.value)) // 阴历时间
const disable = ref(false)
const shengxiaoYear = ref()
const yinliMonthDay =ref()
//更新时间函数
const updateTime = () => {
  solarTime.value = dayjs(new Date()).format("HH:ss")
  // lunarTime.value =
  //   Lunar.fromDate(solarTime.value).toString() +
  //   '日' +
  //   Lunar.fromDate(solarTime.value).getTimeInGanZhi() +
  //   // Lunar.fromDate(solarTime.value).getTimeZhi() +
  //   '时'
}
// 运行动画
const runAnimation = (target) => {
  let step = 0
  const totalSteps = 6 * 3 + target // 循环3圈后到达目标
  disable.value = true
  const animation = setInterval(() => {
    activeIndex.value = step % 6
    step++
    if (step > totalSteps) {
      disable.value = false
      clearInterval(animation)
      viewIndex.value = target
    }
  }, 200)
}
let timer = null
onMounted(() => {
  let t = new Date()
  shengxiaoYear.value  = Lunar.fromDate(t).getYearInGanZhi() + Lunar.fromDate(t).getYearShengXiao()+'年'
  yinliMonthDay.value = Lunar.fromDate(t).getMonthInChinese()+'月'+Lunar.fromDate(t).getDayInChinese()
  timer = setInterval(updateTime, 1000)
})
onBeforeUnmount(() => clearInterval(timer))

const month = Math.abs(time.getMonth())
const day = time.getDay()
const timeIndex = shichen2num(time.getTimeZhi())
function go() {
  viewIndex.value = -1
  runAnimation(xiaoLiuRenAccurate(month, day, timeIndex))

  // activeIndex.value = xiaoLiuRenAccurateAll(month, day, timeIndex)
}
</script>
